<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;margin:0}
        body{
            background-color: #eee;
        }
        div{
            display: block;
            width: 100px;
            height: 100px;
            border-radius:50%;
            background-image:radial-gradient(at 20px 20px,rgba(0,0,0,0),rgba(0,0,0,0.8));
            position:absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
<div></div>
<script>
    //获取元素样式带单位（通过此方法获取的样式是通过浏览器计算的来的，所以不可以进行判断）
    function getStyle(obj,attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        //三元运算，if判断的特殊写法
    }
    //匀速运动动画
    function doMove(element,json,stepX,stepY,fn){
        clearInterval(element.timer);
        element.timer=setInterval(function(){
            var bool=true;
            for(var k in json){
                if(k==="left"){
                    element.style[k]=parseInt(getStyle(element,k))+stepX+"px";
                }else{
                    element.style[k]=parseInt(getStyle(element,k))+stepY+"px";
                }
                if(json[k]<parseInt(getStyle(element,k))){
                    fn&&fn();
                    k==="left"?stepX=-stepX:stepY=-stepY;
                }
                if(parseInt(getStyle(element,k))<0){
                    k==="left"?stepX=-stepX:stepY=-stepY;
                }
            }
//            element.onmouseover=function(ev){
//                ev=ev||event;
//                clearInterval(element.timer);
//                ev.cancelBubble=true;
//            }
        },30);
    }

    var oDiv=document.getElementsByTagName("div")[0];
    oDiv.onmousedown=function(ev){
        ev=ev||event;
        var x=ev.clientX-oDiv.offsetLeft;
        var y=ev.clientY-oDiv.offsetTop;
        ev.cancelBubble=true;
        document.onmousemove=function(ev){
            var startTime=new Date();
            var sTime=startTime.getTime();
            var sXX=parseInt(getStyle(oDiv,"left"));
            var sYY=parseInt(getStyle(oDiv,"top"));
            console.log(sTime);
            console.log(sXX);
            console.log(sYY);
            ev=ev||event;
            var xx=ev.clientX-x;
            var yy=ev.clientY-y;
            oDiv.style.left=xx+"px";
            oDiv.style.top=yy+"px";
            document.onmouseup=function(){
                document.onmousemove=document.onmouseup=null;
                var endTime=new Date();
                var eTime=endTime.getTime();
                var eXX=parseInt(getStyle(oDiv,"left"));
                var eYY=parseInt(getStyle(oDiv,"top"));
                console.log(eTime);
                console.log(eXX);
                console.log(eYY);
                doMove(oDiv,{
                    "left":document.documentElement.clientWidth-oDiv.offsetWidth,
                    "top":document.documentElement.clientHeight-oDiv.offsetHeight
                },(eXX-sXX)/(eTime-sTime),(eYY-sYY)/(eTime-sTime));
            }
            return false;
        }
    }
</script>
</body>
</html>